<script setup>
import { onLoad } from '@dcloudio/uni-app'
import request from '@/utils/request'
import API from '@/utils/API'
import { reactive } from 'vue'

const userInfo = reactive({
	IP: '',
	address: '',
	downloadSize: 0,
	scoreSize: 0
})

const getUserInfo = async () => {
	const { data } = await request({
		url: API.getUserInfo
	})
	// console.log(data)
	
	userInfo.IP = data.IP
	userInfo.address = data.address.province + ' ' + data.address.city
	userInfo.downloadSize = data.downloadSize
	userInfo.scoreSize = data.scoreSize
}	

const clickToClassify = (name, type) => {
	uni.navigateTo({
		url: `/pages/wallpaper-list/wallpaper-list?type=${type}&name=${name}`
	})
}

const contactClick = () => {
	console.log('联系客服')
	uni.makePhoneCall({
		phoneNumber: '17370109760' //仅为示例
	})
}

onLoad(() => {
	getUserInfo()
})
</script>

<template>
	<view class="user pageBg">
		<view class="layer avatar">
			<view class="image-box">
				<image src="/static/xxmLogo.png" mode=""></image>
			</view>
		</view>
		
		<view class="layer detail">
			<view class="nickname">
				{{ userInfo.IP }}
			</view>
			<view class="address">
				ip: {{ userInfo.address }}
			</view>
		</view>
		
		<view class="section">
			<view class="section-item" @click="clickToClassify('我的下载', 'download')">
				<view class="left">
					<view class="icon">
						<uni-icons type="download-filled" size="24" color="$uni-main-color"></uni-icons>
					</view>
					我的下载
				</view>
				<view class="right">
					{{ userInfo.downloadSize }}
					<uni-icons type="right" size="16" color="$uni-gray-2"></uni-icons>
				</view>
			</view>
			
			<view class="section-item" @click="clickToClassify('我的评分', 'score')">
				<view class="left">
					<view class="icon">
						<uni-icons type="star-filled" size="24" color="$uni-main-color"></uni-icons>
					</view>
					我的评分
				</view>
				<view class="right">
					{{ userInfo.scoreSize }}
					<uni-icons type="right" size="16" color="$uni-gray-2"></uni-icons>
				</view>
			</view>
			
			<view class="section-item">
				<view class="left">
					<view class="icon">
						<uni-icons type="download-filled" size="24" color="$uni-main-color"></uni-icons>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					联系客服
					<button class="customer-service" open-type="contact"></button>
					<!-- #endif -->
					
					<!-- #ifdef H5 -->
					拨打电话
					<button @click="contactClick" class="customer-service" open-type="contact"></button>
					<!-- #endif -->
				</view>
				<view class="right">
					<uni-icons type="right" size="16" color="$uni-gray-2"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.user {
	padding-top: 120rpx;
}

.layer {
	margin: 30rpx 0;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.avatar {
	.image-box {
		width: 160rpx;
		height: 160rpx;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}

.detail {
	.nickname {
		font-size: 42rpx;
		margin-bottom: 10rpx;
	}
	
	.address {
		color: $uni-gray-2;
	}
}

.section {
	margin: 25rpx;
	border: 1px solid #eee;
	border-radius: 10rpx;
	background-color: #fff;
	
	.section-item {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		border-bottom: 1px solid #eee;
		
		&:last-child {
			border: none;
		}
		
		.left {
			display: flex;
			justify-content: center;
			color: $uni-gray-1;
			
			.icon {
				color: $uni-main-color;
				margin-right: 20rpx;
			}
		}
		
		.right {
			color: $uni-gray-2;
		}
	}
	
	.customer-service {
		position: absolute;
		opacity: 0;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}
</style>
